{% extends 'base.html' %}
{% load staticfiles %}
{% block extra_head %}
    <script src="{% static 'movie/js/utensil.js' %}"></script>
{% endblock %}
{% block navbar %}
    {#    图广播 #}
    <div id="myCarousel" class="carousel slide"
         style="overflow: hidden;height: 400px">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item">
                <img src="{% static 'movie/images/scott-webb-16964.jpg' %}" alt="第一张" width="100%" height="100%"/>
            </div>
            <div class="item" style="background:#F5E4DC;">
                <img src="{% static 'movie/images/linus-nylund-437333-unsplash.jpg' %}" alt="第二张" width="100%" height="100%"/>

            </div>
            <div class="item active" style="background:url('{% static "movie/images/enjoym7.jpg" %}');">
                <img src="{% static 'movie/images/enjoym7.jpg' %}" alt="第三张"/>
            </div>
            <div class="item" style="background:#c996de;">
                <img src="{% static 'movie/images/pexels-photo-121501.jpeg' %}" alt="第四张" width="100%" height="100%"/>
            </div>
            <div class="item" style="background:#DE2A2D;">
                <img src="{% static 'movie/images/ali-morshedlou-576007-unsplash.jpg' %}" alt="第五张" width="100%" height="100%"/>
            </div>
        </div>
        <a href="#myCarousel" data-slide="prev" class="carousel-control left">
            <span class="glyphicon glyphicon-chevron-left"> </span>
        </a>
        <a href="#myCarousel" data-slide="next" class="carousel-control right">
            <span class="glyphicon glyphicon-chevron-right"> </span>
        </a>
    </div>

{% endblock %}

{% block script %}
    <script type="text/javascript">
        $('#myCarousel').carousel({
            interval: 2000
        });
    </script>
{% endblock %}